<template>
  <div>
    <Card :bordered="false">
      <tables
        ref="tables"
        v-model="tableData"
        :columns="columns"
        @on-edit="onEdit"
        @on-permission="onPermission"/>
    </Card>

    <RoleEdit
      :showModal="showRoleModal"
      :formData="roleData"
      @changeVisible="changeRoleVisible"
      @handleSubmit="handleRoleSubmit"/>

    <RolePermission
      :showModal="showPermissionModal"
      :roleId="roleId"
      :permissionData="permissionData"
      @changeVisible="changePermissionVisible"
      @handleSubmit="handleRolePermissionSubmit"/>

  </div>
</template>

<script>
  import Tables from '_c/tables'
  import RoleEdit from '../components/role-edit'
  import RolePermission from '../components/role-permission'
  import {roles, editRole, permissions} from '@/api/role'
  import {permission} from '@/api/permission'

  export default {
    name: 'environment',
    components: {
      Tables,
      RoleEdit,
      RolePermission
    },
    mounted() {
      this.handleGetRoles()
    },
    data() {
      return {
        hasPermissions: [],
        showRoleModal: false,
        showPermissionModal: false,
        roleData: {},
        permissionData: [],
        tableData: [],
        roleId: 0,
        columns: [
          {title: '角色名', key: 'name'},
          {title: '唯一键', key: 'description'},
          {title: '创建时间', key: 'created_at', hiddenSearch: true},
          {
            title: '操作',
            key: 'handle',
            button: [
              (h, params, vm) => {
                return h('div', [
                  h('a', {
                      attrs: {
                        title: '编辑',
                      },
                      style: {
                        marginRight: '8px'
                      },
                      on: {
                        click: () => {
                          vm.$emit('on-edit', params.row)
                        }
                      }
                    },
                    [
                      h('icon', {
                        props: {
                          type: 'ios-create',
                          size: '20',
                        },
                      }),
                    ]),

                  h('a', {
                      attrs: {
                        title: '权限配置',
                      },
                      style: {
                        marginRight: '8px'
                      },
                      on: {
                        click: () => {
                          vm.$emit('on-permission', params.row)
                        }
                      }
                    },
                    [
                      h('icon', {
                        props: {
                          type: 'md-key',
                          color: '#F6810A',
                          size: '20',
                        },
                      }),
                    ]),
                ])
              }
            ]
          }
        ],
      }
    },
    methods: {
      onEdit: function (params) {
        this.showRoleModal = true
        this.roleData = params
      },
      onPermission: function (params) {
        this.roleId = params.id
        this.showPermissionModal = true
        permission().then(res => {
          this.permissionData = res.data
        })
      },
      handleGetRoles: function () {
        roles({show: 1}).then(res => {
          this.tableData = res.data
        })
      },
      changeRoleVisible: function (val) {
        this.showRoleModal = val
      },
      handleRoleSubmit: function (val) {
        editRole(val).then(res => {
          this.$Message.success(res.message)
          this.showRoleModal = false
          this.handleGetRoles()
        })
      },
      changePermissionVisible: function (val) {
        this.showPermissionModal = val
      },
      handleRolePermissionSubmit: function (val) {
        permissions(val).then(res => {
          this.showPermissionModal = false
          this.$Message.success(res.message)
        })
      },
    }
  }
</script>

<style>

</style>
